<template>
  <main class="flex flex-1 items-center flex-col mb-16">
    <div class="container mx-auto max-w-screen-lg mt-16 px-3">
      <section class="mb-12 space-y-3">
        <h1 class="text-4xl font-black leading-tight text-cape-cod">Food for Dietary Needs</h1>
        <Breadcrumb :dataList="breadcrumbList" />
        <hr>
        <p>Living with allergens can present unique challenges when it comes to maintaining a healthy diet.
          Understanding and meeting your dietary needs is crucial for maintaining optimal health and well-being.</p>
        <p>myWellaBee
          <!-- --> makes navigating the complex world of food easier by organizing food according to a range of dietary
          and lifestyle requirements
        </p>
      </section>

      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-12">

        <a v-for="item in loadTag" :key="item.id" :href="`/global/dietary-needs/additive-free/${item.id}`">
          <div
            class="card  bg-white select-none border border-periwinkle-gray rounded-2xl text-cape-cod flex flex-col items-center justify-between relative cursor-pointer">
            <div class="flex-1 space-y-3 p-1 w-full flex flex-col justify-center items-center">
              <section
                class="bg-gradient-to-tr to-green-50 flex justify-center items-center text-center relative w-full sm:w-auto sm:absolute sm:top-1 sm:bottom-1 sm:left-1 sm:right-1 overflow-hidden rounded-xl"
                :class="`from-${item.color_type ?? getRandomColor()}-100`">
                <h2 class="m-0 p-2 text-lg">{{item.name}}</h2>
              </section>
            </div>
          </div>
        </a>

      </div>

      <hr class="mb-6" />
      <section class="text-center flex flex-col items-center">
        <h3 class="text-lg mb-3">Your dietary need not listed?</h3>
        <p class="text-sm mb-6">We're always striving to accommodate all dietary and food lifestyle needs.<br>If your
          needs aren't in the list above, let us know</p><button type="button"
          class="relative flex whitespace-nowrap gap-2 items-center justify-center text-sm py-3 px-7 leading-4  border rounded-3xl shadow-sm font-bold opacity-100 text-white bg-black hover:bg-cape-cod  cursor-pointer border-black shadow-sm focus:outline-none"><span>Let
            us know!</span></button>
      </section>
    </div>
  </main>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import Breadcrumb from './breadcrumb.vue'
import { tagList } from './mock'
export default defineComponent({
  components: {
    Breadcrumb
  },
  setup() {
    const breadcrumbList = ref([
      {
        href: '/',
        name: 'Dietary Needs'
      }
    ])
    const loadTag = ref(tagList.data.allTags.data);

    const getRandomColor = () => {
      const colors = ['blue', 'red', 'green'];
      const randomIndex = Math.floor(Math.random() * colors.length);
      return colors[randomIndex];
    }

    return {
      loadTag,
      breadcrumbList,
      getRandomColor
    }
  }

})
</script> 
<style lang="less" scoped>

</style>
